<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="full-screen" content="yes">
	<title>H5 应用开发</title>
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/frame.css">
	<link rel="stylesheet" href="./css/style.css">
<!--[if lt IE 9]>
<script src="./js/static/js/html5.min.js"></script>
<![endif]-->
<script>
var WEB_ROOT = './';
</script>
</head>
<body>
<div class="tw4Container" id="tw4_container">
	<div class="header" id="header"></div>
	<div class="swiper-container" id="tw4_pages">
        <div class="tw4PageWrapper swiper-wrapper">
<!-- ============================================================================================================ -->
            <div id="page_home" class="pageItem" data-title="主页" data-classname="home" data-icon="./images/nav_icon_home.png" data-iconhover="./images/nav_icon_home_hover.png">
<!-- Home start -->
				<!-- banner start -->
            	<div class="swiper-container" id="banner">
				  	<div class="swiper-wrapper">
					    <div class="swiper-slide"><img src="./images/upload/001.jpg" alt=""></div>
					    <div class="swiper-slide"><img src="./images/upload/002.jpg" alt=""></div>
					    <div class="swiper-slide"><img src="./images/upload/003.jpg" alt=""></div>
					    <div class="swiper-slide"><img src="./images/upload/004.jpg" alt=""></div>
				  	</div>
                    <div class="bannerPaginatio"></div>
				</div>
				<!-- //banner end -->

				<h3>图片滑动</h3>
				<!-- default_images_slide start -->
			    <div class="swiper-container" id="default_images_slide" style="height:80px;">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt=""></div>
			            <div class="swiper-slide"><img style="width:100%;height:100%" src="" alt="">0</div>
			        </div>
			        <div class="swiper-pagination defaultImagesSlidePagination"></div>
			    </div>
				<!-- //default_images_slide end -->
				

				<!-- 演示测试数据 -->
				<style>
					.testBlock{border-top: 1px solid #ddd;margin:2rem 0;}
					.testBlock a{width:50%;float: left;border-left: 1px solid #ddd;margin-left: -1px;font-size: 1.4rem;text-align: center;line-height:3rem;text-decoration: none;border-bottom: 1px solid #ddd;background-color: #fff;}
				</style>
				<div class="testBlock clearfix">
					<a onepage="title:'基本单页',content:'基本单页内容详情'">基本单页</a>
					<a onepage="title:'Iframe框架页面',type:2,content:'pages/main.html'">Iframe框架页面</a>
					<a onepage="type:2,content:'pages/main.html',fullScreen:true">Iframe框架全屏页面</a>
					<a onepage="title:'指定Dom元素',content:'.testContent'">指定Dom元素</a>
					<a onepage="title:'More左侧滑动菜单',content:'More左侧滑动菜单展示，请点击右上角按钮试试。',moreBtn:true,moreListTitle:'菜单标题',moreListContent:'菜单内容'">More左侧滑动菜单</a>
					<a onepage="title:'More左侧滑动菜单2',content:'菜单内容为指定Dom元素的内容，请点击右上角按钮试试。',moreBtn:true,moreListTitle:'菜单标题',moreListContent:'.testMoreList'">More左侧滑动菜单2</a>
					<a onepage="title:'异步读取数据',type:3,content:'pages/test.php',ajaxData:{param:'test'},callback:'base:test'">异步读取数据</a>
					<a onepage="title:'我在第1层',content:'.testContent2',index:1">多层页面展示</a>
					<a onepage="title:'静态模版页面',callback:'base:test'">静态模版页面</a>
				</div>

				<div class="testContent hide">我是指定Dom元素的内容，content为 '.'+className 或者 '#'+id。</div>
				<div class="testContent2 hide">
					<h3 onepage="title:'我在第2层',content:'基本单页内容详情',index:2">请点击我，打开基本单页</h3>
					<h3 onepage="title:'我在第2层',type:2,content:'pages/main.html',index:2">请点击我，打开Iframe框架页面</h3>
					<h3 onepage="title:'美图秀秀',type:2,content:'http://m.meitu.com/',index:2">请点击我，打开Iframe框架页面，美图秀秀外链</h3>
					<h3 onepage="type:2,content:'pages/main.html',fullScreen:true,index:2">请点击我，Iframe框架全屏页面</h3>
				</div>
				<div class="testMoreList hide">
					<ul>
						<li><a onepage="title:'基本单页',content:'基本单页内容详情'">基本单页</a></li>
						<li><a onepage="title:'多层页面展示',content:'我在第2层',index:2">多层页面展示</a></li>
						<li><a onepage="title:'美图秀秀',type:2,content:'http://m.meitu.com/',index:2">美图秀秀外链</a></li>
						<li><a onepage="content:'自定义头部',customHeader:'.henderSearch',index:2">自定义头部</a></li>
					</ul>
				</div>

				<div class="testBlock clearfix">
					<a swiperpage="page_msg">公告</a>
					<a swiperpage="page_search">搜索</a>
					<a swiperpage="page_contact">联系我们</a>
					<a swiperpage="page_help">帮助文档</a>
				</div>
				<!-- 演示测试数据end -->



<!-- //Home end -->
            </div>
<!-- ============================================================================================================ -->
            <div id="page_msg" class="pageItem" data-title="公告" data-classname="msg" data-icon="./images/nav_icon_msg.png" data-iconhover="./images/nav_icon_msg_hover.png">
<!-- Msg start -->
            	公告内容
<!-- //Msg end -->
            </div>
<!-- ============================================================================================================ -->
            <div id="page_search" class="pageItem" data-title="搜索" data-classname="search" data-icon="./images/nav_icon_search.png" data-iconhover="./images/nav_icon_search_hover.png">
<!-- Search start -->
            	搜索结果
<!-- //Search end -->
            </div>
<!-- ============================================================================================================ -->
            <div id="page_contact" class="pageItem" data-title="联系我们" data-classname="contact" data-icon="./images/nav_icon_contact.png" data-iconhover="./images/nav_icon_contact_hover.png">
<!-- Contact start -->
            	联系我们板块
<!-- //Contact end -->
            </div>
<!-- ============================================================================================================ -->
            <div id="page_help" class="pageItem" data-title="帮助文档" data-classname="help" data-amount="新" data-icon="./images/nav_icon_document.png" data-iconhover="./images/nav_icon_document_hover.png">
<!-- Help start -->
            	帮助文档
<!-- //Help end -->
            </div>
        </div>
		<div class="tw4PagesBg" data-swiper-parallax="-20%" data-swiper-parallax-duration="1600"></div>
    </div>
    <div class="tw4PagePagination" id="page_pagination"></div>
</div>

<!-- 头部搜索模板 -->
<div class="henderSearch hide">
	<span class="searchIcon"></span>
	<input type="search" name="search" value="" placeholder="搜索">
</div>

<script src="./js/static/js/sea.js"></script>
<script src="./js/static/js/seajs-css.js"></script>
<script src="./js/default.js"></script>
</body>
</html>